<template>
  <!-- 变电站概括 -->
  <div class="substation-overview-box">
    <table />
    <div class="header-box">
      <div class="subtitle-box startbox">
        <div class="name">{{$route.query.BDZMC || ''}}</div>
      </div>
      <div class="return-btn">
        <div class="return">
          <span @click="goBack"></span>
        </div>
      </div>
    </div>
    <div class="con-box">
      <div class="left-box">
        <!-- 变电站详细信息、巡检报告 -->
        <div class="substation-details">
          <SubstationDetails />
        </div>
        <div class="report">
          <InspectionResult />
        </div>
      </div>
      <!-- 视频接口 -->
      <div class="right-box">
        <SurveillanceVideo />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SubstationDetails from "./modules/SubstationDetails.vue";
import InspectionResult from "./modules/InspectionResult.vue";
import SurveillanceVideo from "./modules/SurveillanceVideo.vue";
@Component({
  components: {
    SubstationDetails,
    InspectionResult,
    SurveillanceVideo,
  },
})
export default class extends Vue {
  //返回按钮
  goBack() {
    window.history.back();
    // this.$router.push("Home");
  }
}
</script>

<style lang="scss" scoped>
.substation-overview-box {
  width: 100%;
  height: 100%;
  .header-box {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    .subtitle-box {
      width: 40%;
      height: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .name {
        font-size: 0.18rem;
      }
    }
    .return-btn {
      height: 0.3rem;
      margin-top: 0.1rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        margin-right: 0.24rem;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .con-box {
    height: calc(100% - 0.79rem);
    margin-top: 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.24rem;
    .left-box {
      width: 7.27rem;
      height: 100%;
      .substation-details {
        width: 100%;
        height: 64.4%;
      }
      .report {
        width: 100%;
        height: calc(35.6% - 0.2rem);
        margin-top: 0.2rem;
      }
    }
    .right-box {
      width: 11.23rem;
      height: 100%;
    }
  }
}
</style>

